<template>
    <router-link :to="to" append class="fdx-btn-panel" :class="[inline?'fdx-btn-panel--inline':'','fdx-btn-panel--'+size]">
        <i class="fdx-icon-circle-plus-outline"></i>
        <span class="text">{{text}}
            <slot></slot>
        </span>
    </router-link>
</template>

<script>
export default {
    name: 'CutButton',
    props: {
        text: {
            type: String,
            default: ''
        },
        to: {
            type: String,
            default: ''
        },
        inline: {
            type: Boolean,
            default: false
        },
        size: {
            type: String,
            default: 'normal'
        }
    }
}
</script>

<style lang="scss">
@import '../../assets/sass/_vars';
.fdx-btn-panel {
    display: block;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    border: 1px solid $border-color;
    color: $blue;
    font-size: 14px;
    margin-left: 15px;
    margin-right: 15px;
    > a {
        display: block;
    }
    [class*='icon-'] {
        font-size: 20px;
        margin-right: 12px;
        vertical-align: middle;
    }
    .text {
        vertical-align: -1px;
    }
}
.fdx-btn-panel--inline {
    display: inline-block;
}
.fdx-btn-panel--medium {
    padding: 10px 20px;
    border-radius: 3px;
}
</style>